<template>
  <div class="defective-content full-height full-width">
    <unfold>
      <!-- 左侧内容 -->
      <template v-slot:tree-list>
        <div class="left box tree-list">
          <!-- header -->
          <div class="tree-head bg-primary text-white text-weight-regular">
            <q-icon name="iconfont icontubiao-85" color="white" class="q-mr-sm" />
            <span class="head-title vertical-middle user-select-none">停机类型</span>
            <div class="fr font-size-16 margin-l-10">
              <q-btn flat dense color="white" icon="iconfont icontubiao-16" class="font-size-16 btn" :disable="!selectedTypeId"  @click="delType()">
<!--              <q-btn name="iconfont icontubiao-16" color="white">-->
                <q-tooltip>删除</q-tooltip>
              </q-btn>
            </div>
            <div class="fr font-size-16 margin-l-10">
              <q-btn flat dense color="white" icon="iconfont icontubiao-12" class="font-size-16 btn" :disable="!selectedTypeId" @click="addEditType('edit')">
                <!--              <q-btn name="iconfont icontubiao-16" color="white">-->
                <q-tooltip>编辑</q-tooltip>
              </q-btn>
            </div>
            <div class="fr font-size-16 margin-l-10">
              <q-btn flat dense color="white" icon="iconfont icontubiao-39" class="font-size-16 btn" @click="addEditType('add')">
                <!--              <q-btn name="iconfont icontubiao-16" color="white">-->
                <q-tooltip>新增原因</q-tooltip>
              </q-btn>
            </div>
          </div>
          <q-scroll-area class="box-content bg-white full-height" :thumb-style="thumbStyle">
            <q-list style="min-width: 100px;">
              <div v-for="item in typeList" :key="item.id">
                <q-item
                  class="role-item"
                  :active="selectedTypeId === item.id"
                  active-class="activated"
                  @click="onTypeClick(item.id, item.label)"
                  clickable
                  v-ripple
                >
                  <q-item-section>{{ item.label }}</q-item-section>
                </q-item>
                <q-separator />
              </div>
            </q-list>
          </q-scroll-area>
        </div>
      </template>
      <!-- 左侧内容End -->
      <!-- 右侧内容 -->
      <template v-slot:content>
        <div class="right box full-height page-content" style="padding: 20px 0; height: 100%">
          <div class="form-inline" style="width: 100%">
            <q-btn class="margin-r-10" outline color="primary" label="批量删除" @click="deleteReason('', 'multiple')" :disable="selectedId.length == 0" />
            <q-btn class="margin-r-10" outline color="primary" label="新增" @click="batchAdd.show = true" :disable="typeList.length == 0" />
          </div>
<!--          <div>-->
            <q-table
              class="myTable scroll my-sticky-virt scroll-table stick-last-col"
              style="width: calc(100% - 40px)"
              virtual-scroll
              :rows-per-page-options="[0]"
              row-key="indexId"
              :pagination.sync="pagination"
              selection="multiple"
              :selected.sync="selectedId"
              :hide-bottom="!!tableData.length"
              color="primary"
              :data="tableData"
              :columns="tableColumns"
            >
              <template v-slot:body-cell-indexId="props">
                <q-td style="width: 80px">{{props.row.indexId + 1}}</q-td>
              </template>
              <template v-slot:body-cell-operate="props">
                <q-td style="width: 120px">
                  <q-toggle
                    v-model="props.row.enable"
                    :true-value="true"
                    :false-value="false"
                    checked-icon="iconfont icontubiao-49"
                    unchecked-icon="iconfont icontubiao-48"
                    :disable="isStatusToggleDisabled[props.row.id]"
                    color="positive"
                    @input="onStatusToggle(props.row, $event, props.row.indexId)"
                  >
                    <template v-slot>
                      <q-tooltip>{{ props.row.enable ? '禁用' : '启用' }}</q-tooltip>
                    </template>
                  </q-toggle>
                  <table-btn btnType="edit" @click="openEditDialog(props.row)"/>
                  <table-btn btnType="delete" @click="deleteReason(props.row.id, 'single')"/>
                </q-td>
              </template>
              <template v-slot:header-cell-operate="props">
                <th>
                  <div class="flex items-center justify-center">
                    <q-toggle
                      v-model="enable"
                      :true-value="true"
                      :false-value="false"
                      checked-icon="iconfont icontubiao-49"
                      unchecked-icon="iconfont icontubiao-48"
                      color="positive"
                      @input="onAllStatusToggle"
                      v-if="tableData.length > 0"
                    >
                      <template v-slot>
                        <q-tooltip>{{ enable ? '禁用全部' : '启用全部' }}</q-tooltip>
                      </template>
                    </q-toggle>
                    <div>操作</div>
                  </div>
                </th>
              </template>
            </q-table>
<!--          </div>-->
        </div>
      </template>
      <!-- 右侧内容End -->
    </unfold>
    <!-- 类别增改弹出框 -->
    <add-edit-defective
      :type="addEdit.type"
      :show="addEdit.show"
      :typeName="addEdit.typeName"
      @close="addEdit.show = false"
      @addReasonType="addReasonType"
      @editReasonType="editReasonType"
    />
    <!-- 编辑原因弹出框 -->
    <edit-reason-item
      :typeCode="editReason.typeCode"
      :show="editReason.show"
      :code="editReason.code"
      :label="editReason.label"
      :groupName="selectedTypeName"
      @editReason="editReasonItem"
      @close="editReason.show = false"
    />
    <!-- 批量新增 -->
    <batch-add-reason
      :show="batchAdd.show"
      :groupName="selectedTypeName"
      @batchAddReason="batchAddReason"
      @close="batchAdd.show = false"
    />
  </div>
</template>

<script>
import Unfold from 'src/components/unfold'
import addEditDefective from './add-edit-defective'
import editReasonItem from './edit-reason-item'
import batchAddReason from './batch-add-reason'
import {
  getCauseTypeList,
  addCauseType,
  editCauseType,
  getCauseItem,
  editCauseItem,
  addCauseItem,
  delCause,
  delCauseType, changeCauseEnable
} from 'src/boot/system/reason'
export default {
  name: 'stop-content',
  components: {
    Unfold,
    addEditDefective,
    editReasonItem,
    batchAddReason
  },
  data () {
    return {
      thumbStyle: this.CommonConfig.thumbStyle, // 滚动条样式
      isStatusToggleDisabled: {}, // 避免用户操作过快
      typeList: [], // 停机原因类型List
      selectedTypeCode: null, // 选择停机原因类型code
      selectedTypeId: null, // 选择停机原因类型Id
      selectedTypeName: '', // 选择停机原因类型名称
      // 表格不分页
      pagination: {
        rowsPerPage: 0
      },
      // 列表头部数据
      tableColumns: [
        { name: 'indexId', label: '序号', field: 'indexId', align: 'left' },
        { name: 'gname', label: '原因类型', field: 'gname', align: 'left' },
        { name: 'code', label: '原因代码', field: 'code', align: 'left' },
        { name: 'label', label: '原因', field: 'label', align: 'left' },
        { name: 'operate', label: '操作', field: 'operate', align: 'center' }
      ],
      // 表格数据
      tableData: [],
      selectedId: [], // 选中原因
      // 类别增改弹出框
      addEdit: {
        show: false,
        type: '',
        typeName: ''
      },
      // 原因编辑弹出框
      editReason: {
        show: false,
        code: null,
        label: null
      },
      // 编辑选行
      selItem: {
        gId: null,
        typeId: null
      },
      // 批量增加原因
      batchAdd: {
        show: false
      },
      enable: false
    }
  },
  watch: {
    tableData: {
      immediate: true,
      handler: function (val) {
        this.enable = !val.every(item => item.enable === false)
      }
    }
  },
  methods: {
    // 切换字典项禁用/启用状态
    onStatusToggle: function (val, status, index) {
      // status ? status = 1 : status = 0
      this.$set(this.isStatusToggleDisabled, val.id, true)
      const params = {
        enable: status,
        id: val.id,
        type: 'stop'
      }
      changeCauseEnable(params).then(res => {
        if (res.code === 1200) {
          this.$set(this.isStatusToggleDisabled, val.id, status)
        }
      }).finally(() => {
        this.$set(this.isStatusToggleDisabled, val.id, false)
      })
    },
    // 点击停机原因类型列表
    onTypeClick: function (id, name) {
      this.selectedTypeId = id
      this.selectedTypeName = name
      this.getList()
    },
    // 批量新增
    batchAddReason (params) {
      params.forEach(item => {
        item.gid = this.selectedTypeId
        item.causeType = 3
      })
      addCauseItem(params).then(res => {
        if (res.code === '1200') {
          this.batchAdd.show = false
          this.getStopcauseList()
          this.$message.success('批量新增原因成功')
        }
      })
    },
    // 获取原因表格数据
    getList () {
      this.tableData = []
      const params = {
        id: this.selectedTypeId,
        showDisable: true
      }
      getCauseItem(params).then(res => {
        if (res.data.length > 0) {
          this.selectedId = []
          res.data.forEach((row, index) => {
            row.indexId = index
          })
        }
        this.tableData = res.data
      })
    },
    // 获取原因类型列表
    getStopcauseList () {
      getCauseTypeList(3).then(res => {
        this.typeList = []
        if (res.data.length > 0) {
          this.typeList = res.data
          if (!this.selectedTypeId) {
            this.selectedTypeId = res.data[0].id
            this.selectedTypeName = res.data[0].label
          }
          this.getList()
        } else {
          this.selectedTypeId = null
          this.selectedTypeName = null
          this.tableData = []
        }
      })
    },
    // 删除原因
    deleteReason (id, type) {
      let params = {
        id: []
      }
      if (type === 'multiple') {
        this.selectedId.forEach(i => {
          params.id.push(i.id)
        })
      } else if (type === 'single') {
        params.id.push(id)
      }
      this.$q.dialog({
        title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-28"></i>确认删除所选原因？</p>`,
        html: true,
        ok: {
          unelevated: true,
          label: '确认'
        },
        cancel: {
          unelevated: true,
          outline: true,
          label: '取消'
        }
      })
        .onOk(() => {
          delCause(params).then(res => {
            if (res.code === '1200') {
              this.editReason.show = false
              this.getStopcauseList()
              this.$message.success('删除成功')
            }
          })
        })
    },
    // 单行编辑
    openEditDialog (item) {
      this.editReason.show = true
      this.editReason.code = item.code
      this.editReason.label = item.label
      this.selItem.typeId = item.id
      this.selItem.gId = item.gid
    },
    // 显示编辑/新增停机原因类型弹窗
    addEditType (type) {
      this.addEdit.show = true
      this.addEdit.type = type
      if (type === 'add') {
        this.addEdit.typeName = ''
      } else {
        this.addEdit.typeName = this.selectedTypeName
      }
    },
    // 编辑原因
    editReasonItem (item) {
      const params = {
        ...item,
        id: this.selItem.typeId,
        gid: this.selItem.gId
      }
      editCauseItem(params).then(res => {
        if (res.code === '1200') {
          this.editReason.show = false
          this.getStopcauseList()
          this.$message.success('编辑成功')
        }
      })
    },
    // 新增停机原因类型
    addReasonType (name) {
      const params = {
        label: name,
        causeType: 3
      }
      addCauseType(params).then(res => {
        if (res.code === '1200') {
          this.addEdit.show = false
          this.getStopcauseList()
          this.$message.success('新增停机原因类型成功')
        }
      })
    },
    // 删除原因类型
    delType () {
      const params = {
        id: this.selectedTypeId,
        causeType: 3
      }
      this.$q.dialog({
        title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-28"></i>确认删除所选原因类型？</p>`,
        html: true,
        ok: {
          unelevated: true,
          label: '确认'
        },
        cancel: {
          unelevated: true,
          outline: true,
          label: '取消'
        }
      })
        .onOk(() => {
          delCauseType(params).then(res => {
            if (res.code === '1200') {
              if (this.typeList.length > 0) {
                this.selectedTypeId = this.typeList[0].id
                this.selectedTypeName = this.typeList[0].label
                this.getStopcauseList()
              } else {
                this.selectedTypeId = null
                this.selectedTypeName = null
                this.tableData = []
              }
              this.$message.success('删除成功')
            }
          })
        })
    },
    // 编辑停机原因类型
    editReasonType (name) {
      const params = {
        label: name,
        code: this.selectedTypeId,
        causeType: 3
      }
      editCauseType(params).then(res => {
        if (res.code === '1200') {
          this.addEdit.show = false
          this.getStopcauseList()
          this.$message.success('编辑成功')
        }
      })
    },

    onAllStatusToggle () {
      const ids = this.tableData.map(item => item.id)
      const params = {
        enable: this.enable,
        id: ids
      }
      this.$q.loading.show()
      changeCauseEnable(params).then(res => {
        if (res.code === '1200') {
          this.tableData.forEach(item => {
            item.enable = this.enable
          })
        }
      }).finally(() => {
        this.$q.loading.hide()
      })
    }
  },
  created () {
    this.getStopcauseList()
  }
}
</script>

<style scoped lang="stylus">
  .btn{
    width 18px
    height 18px
    min-width 18px
    min-height: 18px;
    padding: 0;
  }
  >>>.btn .q-icon{
    font-size 16px
  }
  .tree-list {
    display flex
    flex-direction column
    width 100%
    min-width 250px
    border-radius 6px
    overflow hidden
    height 100%
    .tree-head {
      flex 40px 0
      padding 0 20px
      line-height 40px
      font-size 14px
      .head-title{
        font-weight bold
      }
    }
  }
  >>>.right-part{
    padding 5px !important
    margin -5px 0 !important
    height calc(100% + 10px)
  }
  >>>.left-part{
    box-shadow: 0px 0px 7px 0px rgba(22, 22, 22, 0.2)
  }
  .left, .right{
    /*border 1px solid #D3D3D3*/
    box-shadow: 0px 0px 7px 0px rgba(22, 22, 22, 0.2)
    border-radius: 6px;
  }
  .defective-content {
    .indicator {
      display inline-block
      border-radius 50%
      height 10px
      width 10px
      margin-right 2px

      &.positive {
        background $positive
      }

      &.negative {
        background $negative
      }
    }

    .text {
      &.positive {
        color $positive
      }

      &.negative {
        color $negative
      }
    }
  }
  .defective-content {
    .box {
      display flex
      flex-direction column
      width 100%
      min-width 250px
      border-radius 6px
      overflow hidden
      height 100%

      .box-header {
        flex 40px 0
        padding 0 20px
        line-height 40px
        font-size 18px
      }

      &.left {
        .box-content {
          flex 1
          padding-bottom 20px

          .role-item {
            padding-left 30px
            font-size 16px

            &.activated {
              background #cfd6fe
              color $primary
            }

            &:hover {
              background #e8ebff

              /deep/ .q-focus-helper {
                display none
              }
            }
          }

          .q-separator {
            margin-left 20px
            width calc(100% - 40px)
          }
        }
      }
    }
  }
</style>
